<template>
<div class="box">
  <div class="echart-box">
    <div class="echart">
      <div v-for="(item,index) in 46" :key="index" :style="getScoreTxtStyle(form.score,index)"></div>
    </div>
    <div class="txt-box">
      <div class="txt-content">
        <div class="txt-score" :class="getScoreTxtColor(form.score)"><b>{{ form.score || 0 }}</b></div>
        <div class="title">累积得分</div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      echart: null,
      form: {
        score: 90
      }
    }
  },
  mounted() {
    this.initDta()
  },
  methods: {
    initDta() {
    },
    getScoreTxtStyle(num, index) {
      let background = ''
      if (!num) {
        num = 0
      }
      if (index < num / 100 * 46) {
        if (num < 60) {
          background = '#D7472D'
        } else if (num >= 60 && num < 90) {
          background = '#FFB83D'
        } else if (num >= 90) {
          background = '#2E9D41'
        }
      }
      return {
        transform: `rotate(${6 * index}deg)`,
        background
      }
    },
    getScoreTxtColor(num){
      if(!num){
        num = 0
      }
      if(num<60){
        return 'red'
      }else if(num >= 60 && num < 90){
        return 'yellow'
      }else if(num >= 90){
        return 'green'
      }
    },
  }
}
</script>

<style scoped lang="less">
.box{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;justify-content: center;
  background: #fff;
}
.echart-box {
  width: 320px;
  height: 160px;
  position: relative;
  .echart {
    position: absolute;
    width: 160px;
    height: 160px;
    bottom: 0;
    left: 24%;
    //background: red;
    transform: rotate(-45deg);
    > div {
      position: absolute;
      top: 50%;
      left: 0;
      width: 50%;
      height: 1px;
      background: #aaa;
      transform-origin: 100% 50%;
    }
  }
  .txt-box {
    position: absolute;
    width: 160px;
    height: 160px;
    bottom: 0;
    left: 24%;
    .txt-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #fff;
      border-radius: 50%;
      width: 80%;
      height: 80%;
      .title {
        text-align: center;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        font-size: 16px;
      }
      .txt-score {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        margin-top: -5px;
        &.red {
          color: #D7472D;
        }
        &.yellow {
          color: #FFB83D;
        }
        &.green {
          color: #2E9D41;
        }
        > b {
          font-size: 40px;
          line-height: 44px;
          display: block;
          position: relative;
          &:after {
            content: '分';
            font-size: 12px;
            line-height: 16px;
            position: absolute;
            left: 100%;
            bottom: 0;
          }
        }
      }
    }
  }
  .desc {
    height: 30px;
    width: 100%;
    line-height: 30px;
    position: absolute;
    right: 0;
    top: 100%;
    white-space: nowrap;
    text-align: center;
  }
}
</style>
